import React, { Component } from 'react'
import { getRemoveFinishedItemAction, getSelectAllItemAction } from './../store/actionCreators'
import { connect } from 'react-redux'

class Foot extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { finishedCount, todos, dealChecked, dealClick } = this.props;
        return (
            <div style={{ paddingLeft: "40px" }}>
                <label>
                    <input type="checkbox"
                        checked={todos.length > 0 && finishedCount === todos.length}
                        onChange={() => dealChecked(finishedCount !== todos.length)} />
                    <span>已完成{finishedCount}件</span>/
                    <span>总计{todos.length}件</span>
                </label>
                <button
                    style={{ float: 'right' }}
                    onClick={() => dealClick()}>清空已完成任务</button>
            </div>
        )
    }
   
}

const mapStateToProps = (state) => {
    return {
        finishedCount: state.finishedCount,
        todos: state.todos
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        dealChecked(flag) {
            const action = getSelectAllItemAction(flag);
            dispatch(action);
        },
        dealClick() {
            const action = getRemoveFinishedItemAction();
            dispatch(action);
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Foot)